<template>
  <div class="live-stream">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">设备列表</h3>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 名称 -->
      <div class="live-name">
        <el-input v-model="input" placeholder="请输入搜索内容"></el-input>
      </div>
      <!-- 画面容器 -->
      <div class="live-stream-container">
        <!-- 画面本身 -->
        <div class="live-stream-item">
          <div class="live-stream-item-img">
            <el-image class="image-panel-image" fit="fill" :src="planeImg" />
          </div>
          <div class="live-stream-item-info">
            <div class="live-stream-item-name">DJI Flip 畅飞套装</div>
            <span class="live-stream-item-type">
              机场相机
            </span>
          </div>
          <div class="live-stream-item-status">
            <el-image class="image-panel-image" fit="fill" :src="planeStuatsIdle" />
            空闲中
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElImage } from 'element-plus'
import planeImg from '@/assets/images/plane_bg.png' // 无人机图片

import planeStuatsIdle from '@/assets/images/device_airline_idle.png' // 无人机图片



const liveStreamImg = ref('https://s21.ax1x.com/2025/07/12/pVlNQtH.png') // 实时画面
const input = ref('') // Add this for the input v-model
</script>

<style lang="scss" scoped>
.live-stream {
  width: 404px;
  height: 903px;
  background: url('@/assets/images/device_airline_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    padding: 28px 16px 31px;
    box-sizing: border-box;
    
    // 名称
    .live-name {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;

      :deep(.el-input) {
          height: 32px !important;
          
          .el-input__wrapper {
            height: 32px !important;
      
            border-left: none !important;
            border-right: none !important;
            background-color: transparent !important;
          }
          
          .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
     
          }
          
        }
      
    }
    
    // 画面容器
    .live-stream-container {
      position: relative;
      width: 373px;
      background: rgba(7, 44, 54, 1);
      border: 1px solid rgba(90, 120, 140, 1);
      margin-bottom: 16px;
      
      // 画面本身
      .live-stream-item {
        width: 100%;
        height: 100px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;

        .live-stream-item-img{
          padding: 0 10px;
          width: 84px;
          height: auto;

          
          img {
            width: 100%;
            height: 100%;
          }
        }

        .live-stream-item-info{
          flex: 1;
          .live-stream-item-name{
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 600;
          }
          .live-stream-item-type{
            padding: 2px 4px;
            color: #FFFFFF;
            font-size: 12px;
            background: #146D8E;
            border-radius: 4px;
          }
          
        }
             
        .live-stream-item-status{
          width: 60px;
          font-size: 12px;
          color: #FFFFFF;
        }
      }
      
   

    }
    

  }
}
</style>